<?php include('includes/code/common.php'); ?>
<!doctype html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=9" />
    <title>Samples - Forms</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="robots" content="index,follow"/>
    <meta http-equiv="expires" content="0"/>
    <link rel="stylesheet" type="text/css" href="includes/css/yui_3.0.0_reset-min.css" />
    <link id="mainCss" href="includes/css/main.css" rel="stylesheet" type="text/css" media="screen" />
    <link href="includes/css/print.css" rel="stylesheet" type="text/css" media="print" />
    <link href="includes/css/template/sample.css" rel="stylesheet" type="text/css" media="screen" />
    <link href="includes/css/template/jqueryUI/smoothness/jquery-ui-1.8.15.custom.css" rel="stylesheet" type="text/css" media="screen" />
    <link href="includes/css/template/cluetip/jquery.cluetip.css" rel="stylesheet" type="text/css" media="screen" />

    <script type="text/javascript" src="includes/javascript/jquery-1.6.1.min.js"></script>
    <script type="text/javascript" src="includes/javascript/template/jquery.validate.min.js"></script>
    <script type="text/javascript" src="includes/javascript/template/additional-methods.js"></script>
    <script type="text/javascript" src="includes/javascript/template/custom-validation-methods.js"></script>
    <script type="text/javascript" src="includes/javascript/template/jquery.maskedinput-1.3.js"></script>
    <script type="text/javascript" src="includes/javascript/template/jquery.timeentry.min.js"></script>
    <script type="text/javascript" src="includes/javascript/template/jquery.keyfilter-1.7.min.js"></script> <!-- Not being used -->
    <script type="text/javascript" src="includes/javascript/template/jquery-ui-1.8.15.custom.min.js"></script>

    <script type="text/javascript" src="includes/javascript/template/custom/tws_console.js"></script>
    <script type="text/javascript" src="includes/javascript/template/custom/tws_form.js"></script>

    <script type="text/javascript" src="includes/javascript/template/jquery.cluetip.js"></script>
    <script type="text/javascript" src="includes/javascript/template/jquery.hoverIntent.js"></script>

    <!-- Testing -->
    <script type="text/javascript" src="includes/javascript/template/jquery.blockUI.js"></script>


    <script type="text/javascript">
      $(function(){
        $("#inlineForm").TWS_Form( {            
          validate : {
          errorContainer : "inlineFormErrors",
          rules : {
            firstName : {required : true, minlength : 2, maxlength : 10, help : "This is the first name"},
            lastName : {required : true, help : {title :"Custom last name", text : "This is the last name"}},
            alias : {lettersonly: true},
            dob: {required : true, date:true, help : "Date of birth"},
            email : {required : true, email : true},
            message : {required : true},
            state : {required: true, help : "Select a state"},
            zip : {zip : true},
            favoriteFoods : {help :"Select one or more of your favorite foods.<p>There are many to choose from.</p><h1>This is yummy!</h1>"},
            color : {requiredGroup : true, help : "Select your favorite color"},
            phone : {phoneUS : true},
            url : {url : true},
            city : {alphanumeric : true},
            age : {digits : true, min : 1, max : 100},
            weight : {number : true},
            creditCard : {creditcard : true},
            salary : {money : true},
            contactTime : {timestamp : true}
          },
          ajaxForm : {
            //options go here
          }
          }});

        $("#blockForm").TWS_Form( {
          validate : {
          errorContainer : "blockFormErrors",
          rules : {
            firstName2 : {required : true, minlength : 2, maxlength : 10},
            lastName2 : {required : true},
           // alias2 : {lettersonly: true, help : {title : "What does the alias mean?", text : "This is an alternate name"}},
            dob2: {required : true, date:true},
            email2 : {required : true, email : true},
            message2 : {required : true, help : "Enter your message here"},
            state2 : {required: true},
            zip2 : {zip : true},
            favoriteFoods2 : {help :"Select one or more of your favorite foods"},
            color222 : {requiredGroup : true},
            phone2 : {phoneUS : true},
            url2 : {url : true},
            city2 : {alphanumeric : true},
            age2 : {digits : true, min : 1, max : 100},
            weight2 : {number : true},
            creditCard2 : {creditcard : true},
            salary2 : {money : true},
            contactTime2 : {timestamp : true}            
          }
          }});

      
      });
    </script>

  </head>

  <?php
  //top navigation selected
  $topNavSelected = "samples";
  ?>

  <?php
  //right navigation selected
  $rightNavSelected = "formsWithValidation2";
  ?>

  <body>

    <!-- Container -->
    <div id="container">
      <!-- Header -->
      <div id="header" title="Treadstone Web Services">
        <?php include('includes/headerContent.php') ?>
      </div>

      <div class="clear"></div>

      <!-- Body -->
      <div id="bodyContent">

        <!-- Breadcrumbs -->
        <div id="breadcrumbs">
          <ul>
            <li class="link"><a href="index.php" title="Home">Home</a></li>
            <li class="link"><a href="samples.php" title="Samples">Samples</a></li>
            <li>Forms</li>
          </ul>
        </div>
        <!-- End Breadcrumbs -->

        <div id="content" >

          <div class="sectionLeft">

            <h1>Forms</h1>

            <div>
              <h2>Important links</h2>
              <p>The tws form plugin uses two main plugins. The jQuery Form Validation Plugin and the jQuery Form Plugin.</p>
              <ul>
                <li><a href="http://docs.jquery.com/Plugins/Validation">jQuery Form Validation Plugin</a></li>
                <li><a href="http://jquery.malsup.com/form/">jQuery Form Plugin</a></li>
              </ul>
            </div>

            <div id="forms" >

              <h2>Inline Form</h2>

              <form id="inlineForm" action="" method="post" class="inlineForm">
                <div class="formErrors" id="inlineFormErrors">
                  <div class="formErrorsHeader">Please correct these errors:</div>
                  <ul></ul>
                </div>

                <div class="row">
                  <label for="firstName"><span class="requiredLabel">*</span>First name
                    <input type="text" id="firstName" name="firstName" value=""/>
                  </label>
                  <label for="lastName"><span class="requiredLabel">*</span>Last name
                    <input type="text" id="lastName" name="lastName" value=""/>
                  </label>

                  <label for="alias">Alias
                    <input type="text" id="alias" name="alias" value=""/>
                  </label>

                  <label for="gender_male" class="inline">
                    <input type="radio" id="gender_male" name="gender" value="male"/>Male
                  </label>

                  <label for="gender_female" class="inline">
                    <input type="radio" id="gender_female" name="gender" value="female"/>Female
                  </label>

                  <div class="fieldErrors"></div>
                </div>

                <div class="row">
                  <label for="dob"><span class="requiredLabel">*</span>Date of birth
                    <input type="text" id="dob" name="dob" rel="date" />
                  </label>

                  <label for="age">Age
                    <input type="number" id="age" name="age"/>
                  </label>

                  <label for="ageRange"> Age range
                    <select id="ageRange" name="ageRange">
                      <option value="10">0-10 yrs</option>
                      <option value="20">10-20 yrs</option>
                      <option value="30">20-30 yrs</option>
                      <option value="40">30-40 yrs</option>
                      <option value="50">&gt;50 yrs</option>
                    </select>
                  </label>

                  <div class="fieldErrors"></div>

                </div>
                <div class="row">
                  <!--Address-->
                  <label for="street">Street
                    <input type="text" id="street" name="street"/>
                  </label>

                  <label for="city">City
                    <input type="text" id="city" name="city"/>
                  </label>

                  <label for="state"><span class="requiredLabel">*</span>State
                    <select id="state" name="state">
                      <option value=""></option>
                      <option value="IL">IL</option>
                      <option value="MN">MN</option>
                    </select>
                  </label>

                  <label for="zip">Zip code
                    <input type="text" id="zip" name="zip" rel="zip"/>
                  </label>

                  <div class="fieldErrors"></div>

                </div>

                <div class="row">
                  <label for="email"><span class="requiredLabel">*</span>Email address
                    <input type="email" id="email" name="email"/>
                  </label>

                  <label for="phone">Phone number
                    <input type="tel" id="phone" name="phone"/>
                  </label>

                  <label for="url">Url
                    <input type="url" id="url" name="url"/>
                  </label>

                  <div class="fieldErrors"></div>

                </div>

                <div class="row">
                  <!--Favorite Foods-->
                  <fieldset id="favoriteFoods">
                    <legend>Favorite foods</legend>
                    <label for="food1" class="stacked">
                      <input type="checkbox" id="food1" name="food1" value="Chinese"/>Chinese
                    </label>
                    <label for="food2" class="stacked">
                      <input type="checkbox" id="food2" name="food2" value="Italian"/>Italian
                    </label>
                    <label for="food3" class="stacked">
                      <input type="checkbox" id="food3" name="food3" value="Mediterranean"/>Mediterranean
                    </label>
                    <label for="food4" class="stacked">
                      <input type="checkbox" id="food4" name="food4" value="Mexican"/>Mexican
                    </label>
                  </fieldset>

                  <!--Favorite Color--->
                  <fieldset id="color">
                    <legend><span class="requiredLabel">*</span>Favorite color</legend>
                    <label for="color1" class="inline">
                      <input type="radio" id="color1" name="color" value="red"/>Red
                    </label>
                    <label for="color2" class="inline">
                      <input type="radio" id="color2" name="color" value="green"/>Green
                    </label>
                    <label for="color3" class="inline">
                      <input type="radio" id="color3" name="color" value="blue"/>Blue
                    </label>
                  </fieldset>

                  <div class="fieldErrors"></div>

                </div>


                <div class="row">
                  <label for="weight">Weight (lbs)
                    <input type="text" id="weight" name="weight" />
                  </label>
                  <div class="fieldErrors"></div>
                </div>

                <div class="row">
                  <label for="creditCard">Credit Card Number
                    <input type="text" id="creditCard" name="creditCard" />
                  </label>
                  <div class="fieldErrors"></div>
                </div>

                <div class="row">
                  <label for="salary">Salary
                    <input type="text" id="salary" name="salary" />
                  </label>
                  <div class="fieldErrors"></div>
                </div>

                <div class="row">
                  <label for="contactTime">Best time to call
                    <input type="text" id="contactTime" name="contactTime" rel="time" />
                  </label>
                  <div class="fieldErrors"></div>
                </div>

                <div class="row">

                  <label for="message"><span class="requiredLabel">*</span>Message
                    <textarea cols="20" rows="5" id="message" name="message"></textarea>
                  </label>

                  <div class="fieldErrors">
<!--                    <span>Message is required</span>-->
                  </div>

                </div>

                <div class="row">
                  <input type="submit" id="submitInlineForm" name="submitInlineForm" value="Submit"/>
                </div>

              </form>


              <h2>Block Form</h2>

              <form id="blockForm" action="" method="post" class="blockForm">

                <div class="formErrors" id="blockFormErrors">
                  <div class="formErrorsHeader">Please correct these errors:</div>
                  <ul></ul>
                </div>

                <div class="row">
                  <label for="firstName2"><span class="requiredLabel">*</span>First name
                    <input type="text" id="firstName2" name="firstName2" value=""/>
                  </label>
                </div>
                <div class="row">
                  <label for="lastName2"><span class="requiredLabel">*</span>Last name
                    <input type="text" id="lastName2" name="lastName2" value=""/>
                  </label>
                </div>

                <div class="row">
                  <label for="alias2">Alias
                    <input type="text" id="alias2" name="alias2" value=""/>
                  </label>
                </div>



                <div class="row">
                  <label for="dob2"><span class="requiredLabel">*</span>Date of birth
                    <input type="text" id="dob2" name="dob2" rel="date" />
                  </label>
                </div>

                <div class="row">

                  <label for="age2">Age
                    <input type="number" id="age2" name="age2"/>
                  </label>

                </div>


                <div class="row">
                  <label for="ageRange2"> Age range
                    <select id="ageRange2" name="ageRange2">
                      <option value="10">0-10 yrs</option>
                      <option value="20">10-20 yrs</option>
                      <option value="30">20-30 yrs</option>
                      <option value="40">30-40 yrs</option>
                      <option value="50">&gt;50 yrs</option>
                    </select>
                  </label>
                </div>


                <div class="row">
                  <!--Address-->
                  <label for="street2">Street
                    <input type="text" id="street2" name="street2"/>
                  </label>
                </div>
                <div class="row">
                  <label for="city2">City
                    <input type="text" id="city2" name="city2"/>
                  </label>
                </div>
                <div class="row">
                  <label for="state2"><span class="requiredLabel">*</span>State
                    <select id="state2" name="state2">
                      <option value=""></option>
                      <option value="IL">IL</option>
                    </select>
                  </label>
                </div>

                <div class="row">
                  <label for="zip2">Zip code
                    <input type="text" id="zip2" name="zip2" rel="zip"/>
                  </label>
                </div>

                <div class="row">
                  <label for="email2"><span class="requiredLabel">*</span>Email address
                    <input type="email" id="email2" name="email2"/>
                  </label>
                </div>
                <div class="row">
                  <label for="phone2">Phone number
                    <input type="tel" id="phone2" name="phone2"/>
                  </label>
                </div>

            <div class="row">
                  <label for="url2">Url
                    <input type="url" id="url2" name="url2"/>
                  </label>
            </div>

                <div class="row">
                  <!--Favorite Foods-->
                  <fieldset id="favoriteFoods2">
                    <legend>Favorite foods</legend>
                    <label for="food12" class="stacked">
                      <input type="checkbox" id="food12" name="food12" value="Chinese"/>Chinese
                    </label>
                    <label for="food22" class="stacked">
                      <input type="checkbox" id="food22" name="food22" value="Italian"/>Italian
                    </label>
                    <label for="food32" class="stacked">
                      <input type="checkbox" id="food32" name="food32" value="Mediterranean"/>Mediterranean
                    </label>
                    <label for="food42" class="stacked">
                      <input type="checkbox" id="food42" name="food42" value="Mexican"/>Mexican
                    </label>
                  </fieldset>
                </div>

              <div class="row">
                  <!--Favorite Color--->
                  <fieldset id="color222">
                    <legend><span class="requiredLabel">*</span>Favorite color</legend>
                    <label for="color12" class="inline">
                      <input type="radio" id="color12" name="color222" value="red"/>Red
                    </label>
                    <label for="color22" class="inline">
                      <input type="radio" id="color22" name="color222" value="green"/>Green
                    </label>
                    <label for="color32" class="inline">
                      <input type="radio" id="color32" name="color222" value="blue"/>Blue
                    </label>
                  </fieldset>

                </div>


                <div class="row">
                  <label for="weight2">Weight (lbs)
                    <input type="text" id="weight2" name="weight2" />
                  </label>

                </div>

                <div class="row">
                  <label for="creditCard2">Credit Card Number
                    <input type="text" id="creditCard2" name="creditCard2" />
                  </label>
                </div>

                <div class="row">
                  <label for="salary2">Salary
                    <input type="text" id="salary2" name="salary2" />
                  </label>

                </div>

                <div class="row">
                  <label for="contactTime2">Best time to call
                    <input type="text" id="contactTime2" name="contactTime2" rel="time" />
                  </label>

                </div>

                <div class="row">

                  <label for="message2"><span class="requiredLabel">*</span>Message
                    <textarea cols="20" rows="5" id="message2" name="message2"></textarea>
                  </label>

                </div>

                <div class="row">
                  <input type="submit" id="submitBlockForm" name="submitBlockForm" value="Submit"/>
                </div>

              </form>


            </div>


            <!--   end #section-->
          </div>

          <!-- Right Navigation -->
          <div id="sidebar">
            <?php include('includes/rightNavSamples.php') ?>
          </div>
          <!-- end Right Navigation -->


          <!-- end #content -->
        </div>

      </div>
      <!-- end #bodyContent -->
      <!-- End Body -->

      <!-- Footer -->
      <div id="footer">
        <?php include('includes/footer.php') ?>
      </div>
      <!-- End Footer -->
    </div>
    <!-- End Container -->
  </body>
</html>

